Rename "channels" to "conversations."

The term "channel" for a conversational container has a long and storied history, but is mostly evocative of IRC and of other, ah, "nerd-centric" services. It does show up in more widespread contexts: Discord and Slack both refer to their primary conversational containers as "channels," for example. However, I think it's unnecessary jargon, and I'd like to do away with it.

To that end, this change pervasively changes one term to the other wherever it appears, with the following exceptions:

* A `channel` concept (unrelated to conversations) is also provided by an external library; we can't and shouldn't try to rename that.
* The code to deal with the `pilcrow:channelData` and `pilcrow:lastActiveChannel` local storage properties is still present, to migrate existing data to new keys. It will be removed in a later change.

This is a **breaking API change**. As we are not yet managing any API compatibility promises, this is formally not an issue, but it is something to be aware of practically. The major API changes are:

* Paths beginning with `/api/channels` are now under `/api/conversations`, without other modifications.
* Fields labelled with `channel…` terms are now labelled with `conversation…` terms. For example, a `message` `sent` event is now sent to a `conversation`, not a `channel`.

This is also a **breaking UI change**. Specifically, any saved paths for `/ch/CHANNELID` will now lead to a 404. The corresponding paths are `/c/CONVERSATIONID`. While I've made an effort to migrate the location of stored data, I have not tried to provide adapters to fix this specific issue, because the disruption is short-lived and very easily addressed by opening a channel in the client UI.

This change is obnoxiously large and difficult to review, for which I apologize. If this shows up in `git annotate`, please forgive me. These kinds of renamings are hard to carry out without a major disruption, especially when the concept ("channel" in this case) is used so pervasively throughout the system.

I think it's worth making this change that pervasively so that we don't have an indefinitely-long tail of "well, it's a conversation in the docs, but the table is called `channel` for historical reasons" type issues.

Merges conversations-not-channels into main.

1 files changed, 121 insertions, 0 deletions

diff --git a/ui/routes/(app)/c/[conversation]/+page.svelte b/ui/routes/(app)/c/[conversation]/+page.svelte
new file mode 100644
index 0000000..e6cd845
--- /dev/null
+++ b/ui/routes/(app)/c/[conversation]/+page.svelte
@@ -0,0 +1,121 @@
+<script>
+  import { DateTime } from 'luxon';
+  import { page } from '$app/state';
+  import MessageInput from '$lib/components/MessageInput.svelte';
+  import MessageRun from '$lib/components/MessageRun.svelte';
+  import Message from '$lib/components/Message.svelte';
+  import { runs } from '$lib/runs.js';
+
+  const { data } = $props();
+  const { session, outbox } = data;
+  let activeConversation;
+
+  const conversationId = $derived(page.params.conversation);
+  const conversation = $derived(
+    session.conversations.find((conversation) => conversation.id === conversationId),
+  );
+  const messages = $derived(
+    session.messages.filter((message) => message.conversation === conversationId),
+  );
+  const unsent = $derived(
+    outbox.messages.filter((message) => message.conversation === conversationId),
+  );
+  const deleted = $derived(outbox.deleted.map((message) => message.messageId));
+  const unsentSkeletons = $derived(
+    unsent.map((message) => message.toSkeleton($state.snapshot(session.currentUser))),
+  );
+  const messageRuns = $derived(runs(messages.concat(unsentSkeletons), session.currentUser));
+
+  function inView(parentElement, element) {
+    const parRect = parentElement.getBoundingClientRect();
+    const parentTop = parRect.top;
+    const parentBottom = parRect.bottom;
+
+    const elRect = element.getBoundingClientRect();
+    const elementTop = elRect.top;
+    const elementBottom = elRect.bottom;
+
+    return parentTop < elementTop && parentBottom > elementBottom;
+  }
+
+  function getLastVisibleMessage() {
+    if (activeConversation) {
+      const childElements = activeConversation.getElementsByClassName('message');
+      const lastInView = Array.from(childElements)
+        .reverse()
+        .find((el) => {
+          return inView(activeConversation, el);
+        });
+      return lastInView;
+    }
+  }
+
+  function setLastRead() {
+    const lastInView = getLastVisibleMessage();
+    const at = !!lastInView ? DateTime.fromISO(lastInView.dataset.at) : conversation?.at;
+    if (!!at) {
+      session.local.updateLastReadAt(conversationId, at);
+    }
+  }
+
+  $effect(() => {
+    const _ = session.messages;
+    setLastRead();
+  });
+
+  $effect(() => {
+    // This is just to force it to track messageRuns.
+    const _ = messageRuns;
+    document.querySelector('.message-run:last-child .message:last-child')?.scrollIntoView();
+  });
+
+  function handleKeydown(event) {
+    if (event.key === 'Escape') {
+      setLastRead(); // TODO: pass in "last message DT"?
+    }
+  }
+
+  let lastReadCallback = null;
+
+  function onscroll() {
+    clearTimeout(lastReadCallback); // Fine if lastReadCallback is null still.
+    lastReadCallback = setTimeout(setLastRead, 2 * 1000);
+  }
+
+  async function sendMessage(message) {
+    outbox.sendToConversation(conversationId, message);
+  }
+
+  async function deleteMessage(id) {
+    outbox.deleteMessage(id);
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<div class="active-conversation" {onscroll} bind:this={activeConversation}>
+  {#each messageRuns as { sender, ownMessage, messages }}
+    <MessageRun
+      {sender}
+      class={{
+        ['own-message']: ownMessage,
+        ['other-message']: !ownMessage,
+      }}
+    >
+      {#each messages as message}
+        <Message
+          {...message}
+          editable={ownMessage}
+          {deleteMessage}
+          class={{
+            unsent: !message.id,
+            deleted: deleted.includes(message.id),
+          }}
+        />
+      {/each}
+    </MessageRun>
+  {/each}
+</div>
+<div class="create-message">
+  <MessageInput {sendMessage} />
+</div>